<script setup lang="ts">
// componets
import comDetailItem from '@/components/common/com-detailItem/com-detailItem.vue';
import comScrollView from '@/components/common/com-scrollView/com-scrollView.vue'
import comNavigation from '@/components/common/com-navigationBar/com-navigation.vue';
import comIcon from '@/components/common/com-icon/com-icon.vue';
// api
import { getknowledgeListAPI, getKnowledgeTopicByIdAPI } from '@/api/healthEncyclopedia'
import { onMounted, ref } from 'vue';
// vue
import { useRoute, useRouter } from 'vue-router'
import type { TopicDetail } from '@/types/healthEncyclopedia';
import type { rowss } from '@/types/types';
import { postLikeAPI } from '@/api/doctorDetail';
import { showToast } from 'vant';
// 第三方库 复制
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const router = useRouter()
let route = useRoute()
let id = route.params.keyword as string
let TopicDetailData = ref<TopicDetail>()
// 获取话题数据
const getKnowledgeTopicByIdData = async () => {
  let res = await getKnowledgeTopicByIdAPI(id)
  if (res.data.code === 10000) {
    TopicDetailData.value = res.data.data
  }
}
// 获取话题列表
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const list = ref<rowss[]>([])
// 只请求一次
const only = ref(false)
// 禁止请求
const nomore = ref(false)
const getknowledgeListData = async () => {
  let res = await getknowledgeListAPI(currentPage.value, pageSize.value, id)
  if (res.data.code === 10000) {
    if (!only.value) {
      list.value = res.data.data.rows
      only.value = true
    } else {
      list.value.push(...res.data.data.rows)
    }
    if (res.data.data.rows.length < pageSize.value) nomore.value = !nomore.value
  }
}

onMounted(() => {
  getknowledgeListData()
  getKnowledgeTopicByIdData()
})
const getMore = () => {
  if (nomore.value) return
  currentPage.value++
  getknowledgeListData()
}
// 去文章详情页
const goTopicDetail = (val: string) => {
  router.push(`/articleDetail/${val}`)
}
// 关注
const onFollow = async () => {
  let res = await postLikeAPI(id, 'topic')
  if (res.data.code === 10000) {
    if (TopicDetailData.value!.likeFlag === 1) {
      TopicDetailData.value!.likeFlag = 0
      showToast({
        message: "取消关注成功"
      })
    } else {
      TopicDetailData.value!.likeFlag = 1
      showToast({
        message: "关注成功"
      })
    }
  }
}
// 分享
const showShare = ref(false)
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
];
type Option = {
  name: string, description: string, icon: string, className: string
}
const onSelect = async (option: Option, index: number) => {
  await toClipboard(window.location.href).then(res => {
    showToast({
      message: '复制链接成功,请打开微信进行分享'
    })
  }).catch(res => {
    console.log('失败');
  })
}

</script>
<template>
  <div class="box">
    <comScrollView @onReachBottom="getMore">
      <comNavigation height="44px">
        <template v-slot:title>
          <div class="title">
            话题主页
          </div>
        </template>
        <template v-slot:right>
          <div class="right">
            <div class="shared">
              <comIcon class="sharedIcon" name="icons-home-share" @click="showShare = true"></comIcon>
            </div>
          </div>
        </template>
      </comNavigation>
      <div class="banner">
        <img class="bannerImg" :src="TopicDetailData?.banner" alt="">
        <div class="topice-name">{{ TopicDetailData?.topic }}</div>
        <div class="line">
          <div class="data">
            {{ TopicDetailData?.likeNumber }}人关注 {{ TopicDetailData?.knowledgeNumber }}篇文章
          </div>
          <div class="btnBox" @click="onFollow">
            {{ TopicDetailData?.likeFlag === 1 ? '已关注' : '关注话题' }}
          </div>
        </div>
      </div>
      <div class="list">
        <comDetailItem @goTo="goTopicDetail(item.id)" v-for="item in list" :item="item"></comDetailItem>
        <div v-if="!nomore" class="adm-infinite-scroll">正在加载...</div>
        <div v-else class="adm-infinite-scroll">暂无更多</div>
      </div>
    </comScrollView>
  </div>
  <van-share-sheet v-model:show="showShare" :options="options" @select="onSelect" />
</template>
<style scoped lang="scss">
.box {
  .banner {
    position: relative;

    .bannerImg {
      width: 100%;
    }

    .topice-name {
      position: absolute;
      top: 40px;
      left: 15px;
      font-size: 25px;
      color: #fff;
    }

    .line {
      position: absolute;
      bottom: 15px;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      align-items: center;
      color: #fff;

      .data {
        font-size: 11px;
      }

      .btnBox {
        font-size: 14px;
        border-radius: 30px;
        background-color: #16c2a3;
        height: 22px;
        padding: 5px 14px;
      }
    }

  }

  .list {
    padding: 14px 14px 0;
  }

}

.van-share-sheet__options {
  --van-share-sheet-cancel-button-height: 100px;
  justify-content: space-around !important;
  --van-share-sheet-icon-size: 50px;
  --van-share-sheet-option-name-font-size: 14px
}

.adm-infinite-scroll {
  color: #A2A2A2;
  background-color: #FFFFFF;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
</style>
